// import { useState } from "react";

import PageTitle from "@/components/PageTitle";
import Micons from "@/components/MIcons/index";

import "./index.scss";

const listData: any[] = [];

// 模拟数据
for (let i = 1; i < 72; i++) {
  listData.push({
    id: i,
    name: "",
    value: Math.floor(Math.random() * 1000),
  });
}
const TaskInvite = () => {
  return (
    <div className="task-invite-container">
      <PageTitle />

      {/* 用户信息 */}
      <div className="user-info">
        <div className="user-photo">
          <img src="/images/user.jpg" alt="" />
        </div>
        <div className="info">
          <div className="username">Elon Musk</div>
          <div className="wallet-btn">
            <div className="btn">
              <span className="icon">
                <Micons
                  type="extend"
                  className="icon-qianbao"
                  colorFill="#ffffff"
                />
              </span>
              <span className="word">Link Wallet</span>
            </div>
          </div>
        </div>
      </div>

      {/* 总额 */}
      <div className="total-box">
        <div className="item">
          <div className="num">52,123</div>
          <div className="name">Computing Power</div>
        </div>
        <div className="item">
          <div className="num">2</div>
          <div className="name">Friends</div>
        </div>
      </div>

      {/* 任务框 */}
      <div className="frame-box">
        <div className="invite-box">
          <div className="title-box">
            <span className="name">Invite Friends</span>
            <span className="num">+2000</span>
          </div>
          <div className="desc">
            Earn up to 2.000 credits! Earn 5% of their airdrops in return!
          </div>
          {/* 邀请按钮 */}
          <div className="btn-box">
            <div className="left-box">
              <div className="btn">Invite</div>
              <div className="btn btn-icon">
                <span className="icon">
                  <Micons
                    type="extend"
                    className="icon-fuzhi"
                    colorFill="#ffffff"
                  />
                </span>
              </div>
            </div>

            <div className="link-box">
              <span className="name">rule</span>
              <span className="icon">
                <Micons
                  type="extend"
                  className="icon-gengduo"
                  colorFill="#ffffff"
                />
              </span>
            </div>
          </div>

          {/* 标题 */}
          <div className="title-box mt2">
            <span className="name">Friends List</span>
            <div className="friends-icon">
              <span className="icon">
                <Micons
                  type="extend"
                  className="icon-weibiaoti--"
                  colorFill="#545454"
                />
              </span>
              <span className="num">2</span>
            </div>
          </div>

          {/* 列表 */}
          <div className="friends-list">
            <ul>
              {listData.map((item) => (
                <li key={item.id}>
                  <div className="item-box">
                    <div className="icon-box">
                      <img src="/images/user.jpg" />
                    </div>
                    <div className="left-box">
                      <div className="name">Elon Musk</div>
                      <div className="value">121,232</div>
                    </div>
                    <div className="right-box">
                      <span className="num">+{item.value}</span>
                    </div>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
};

export default TaskInvite;
